import { createRouter, createWebHistory } from 'vue-router' // 导入Vue Router的创建函数
import { useUserStore } from '@/stores/user' // 导入用户状态管理store

// 定义路由配置数组
const routes = [
  {
    path: '/', // 根路径
    name: 'Home', // 路由名称
    component: () => import('../pages/index/index.vue') // 懒加载首页组件
  },
  {
    path: '/login', // 登录页面路径
    name: 'Login', // 路由名称
    component: () => import('../pages/login/login.vue') // 懒加载登录组件
  },
  {
    path: '/register', // 注册页面路径
    name: 'Register', // 路由名称
    component: () => import('../pages/register/register.vue') // 懒加载注册组件
  },
  {
    path: '/user', // 用户中心路径
    name: 'User', // 路由名称
    component: () => import('../pages/user/user.vue'), // 懒加载用户中心组件
    meta: { requiresAuth: true } // 元信息：需要认证才能访问
  },
  {
    path: '/user/reviews', // 用户评价页面路径
    name: 'UserReviews', // 路由名称
    component: () => import('../pages/user/reviews.vue'), // 懒加载用户评价组件
    meta: { requiresAuth: true } // 元信息：需要认证才能访问
  },
  {
    path: '/product/:id', // 商品详情页面路径，:id是动态参数
    name: 'ProductDetail', // 路由名称
    component: () => import('../pages/product/detail.vue') // 懒加载商品详情组件
  },
  {
    path: '/cart', // 购物车页面路径
    name: 'Cart', // 路由名称
    component: () => import('../pages/cart/cart.vue'), // 懒加载购物车组件
    meta: { requiresAuth: true } // 元信息：需要认证才能访问
  },
  {
    path: '/order', // 订单列表页面路径
    name: 'OrderList', // 路由名称
    component: () => import('../pages/order/list.vue'), // 懒加载订单列表组件
    meta: { requiresAuth: true } // 元信息：需要认证才能访问
  },
  {
    path: '/order/:id', // 订单详情页面路径，:id是动态参数
    name: 'OrderDetail', // 路由名称
    component: () => import('../pages/order/detail.vue'), // 懒加载订单详情组件
    meta: { requiresAuth: true } // 元信息：需要认证才能访问
  },
  {
    path: '/payment', // 支付页面路径
    name: 'Payment', // 路由名称
    component: () => import('../pages/payment/payment.vue'), // 懒加载支付组件
    meta: { requiresAuth: true } // 元信息：需要认证才能访问
  },
  {
    path: '/category', // 分类页面路径
    name: 'Category', // 路由名称
    component: () => import('../pages/category/category.vue') // 懒加载分类组件
  },
  {
    path: '/search', // 搜索页面路径
    name: 'Search', // 路由名称
    component: () => import('../pages/search/search.vue') // 懒加载搜索组件
  },
  {
    path: '/address', // 地址管理页面路径
    name: 'Address', // 路由名称
    component: () => import('../pages/address/index.vue'), // 懒加载地址管理组件
    meta: { requiresAuth: true } // 元信息：需要认证才能访问
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(), // 使用HTML5 History模式
  routes // 路由配置数组
})

// 全局前置守卫：在路由跳转之前执行
router.beforeEach((to, from, next) => {
  // 获取用户store实例
  const userStore = useUserStore() // 创建用户store实例
  
  console.log('路由跳转:', { from: from.path, to: to.path }) // 调试日志：记录路由跳转
  
  // 检查目标路由是否需要认证
  if (to.meta.requiresAuth) {
    // 需要认证的路由
    if (userStore.isLoggedIn) {
      // 用户已登录，允许访问
      console.log('用户已登录，允许访问:', to.path) // 调试日志
      next() // 继续路由跳转
    } else {
      // 用户未登录，重定向到登录页面
      console.log('用户未登录，重定向到登录页面') // 调试日志
      next('/login') // 重定向到登录页面
    }
  } else {
    // 不需要认证的路由，直接允许访问
    console.log('无需认证，允许访问:', to.path) // 调试日志
    next() // 继续路由跳转
  }
})

// 全局后置钩子：在路由跳转之后执行
router.afterEach((to, from) => {
  // 路由跳转完成后的处理
  console.log('路由跳转完成:', { from: from.path, to: to.path }) // 调试日志
  
  // 可以在这里添加页面标题设置、统计代码等
  if (to.meta.title) {
    // 如果路由有标题，则设置页面标题
    document.title = to.meta.title as string // 设置页面标题
  } else {
    // 否则使用默认标题
    document.title = '电商APP' // 设置默认页面标题
  }
})

// 导出路由实例
export default router // 导出配置好的路由实例，供main.ts使用 